是的,你沒有看錯。現在就開始你人生第一段的 JavaScript 程式碼。
只是在開始寫之前,你必須先了解一下 JS 的建置方式:
JS 要放在哪?
1.放在 <head>
和 </head>
之間:
2.放在 HTML 最後面, </body>
結尾標籤之前:(此方式最推薦)
在前一個章節就提過 考試會考 的內容:
瀏覽器讀取 HTML 的順序是由上而下讀取,當讀到 <script>
標籤或 JS 檔案時,網頁渲染會暫停,這時瀏覽器會先把 JS 腳本先執行完,再渲染後面的內容。所以 JS 腳本或檔案要放在 HTML 的最後 </body>
結束標籤之前,才不會導致頁面被中斷讀取過久而影響使用者體驗。
而一個 HTML 裡面可以同時存在很多個 JS 或 JQ 腳本,所以優化瀏覽器最有效率的寫法,當然是把 JS、JQ 腳本或引用的檔案,放在 HTML 最後面 </body>
結尾標籤之前囉。
JS 怎麼寫?
1.直接內嵌在 HTML 文件中:
把 JS 程式碼寫在 <script>
和 </script>
標籤裡面
舊版 HTML 寫法:
必須在 <script>
標籤內指定 type
屬性,且規定腳本的 MIME 類型為 text/javascript
<script type="text/javascript">
var a = 5;
console.log(a);
</script>
新版 HTML5 寫法:
<script>
會自動執行並忽略 type
屬性,不需要再多寫 MIME 類型。
<script>
var a = 5;
console.log(a);
</script>
2.引入外部 JS 命令稿(此方法最推薦)
把 JS 程式碼寫在獨立檔案,以絕對路徑讀取檔案,供 HTML 引入執行。
<script src="js/xxxxx.js"></script>
或是一些含有 JS 或 jQuery(以下簡稱 JQ) 特效的官方 CDN 等,才需要用外部連結引入,如:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
4.HTML 標籤內的嵌入式寫法。(此方法最不推薦!)
早期網頁還沒出現 jQuery 之前,在 HTML 標籤內混寫 JS 語法是當時傳統的做法,你也許見過下面的寫法:
<input type="text" name="date" onchange="validateDate()">
或
<div onclick="window.open('test.html','_self');" class="btn"></div>
將 JS 嵌入 HTML 標籤裡使用,會導致網站原始碼不易閱讀及維護,原因是 HTML 標籤通常是描述檔案的排版結構,而非網頁操作的程式行為。而「非侵入式 JavaScript」方案,則是以程式碼另外獨立撰寫其需要對應的事件,而不是和網頁元素內嵌在一起。在 JS 腳本事件中的相關元素,在 HTML 標籤中則改用簡單的屬性參數,如:用 id屬性、 class名稱 或 value值等,作為程式碼回應的參數進行執行需要的設定,尤其對網頁內擁有許多相同功能需要傳輸或設定,更是方便許多。
如果把上面範例第一行的 <input>
語法,改為非侵入式寫法,整句話的語意會更加清晰。
<input type="text" name="date" id="date">
<script>
window.addEventListener('DOMContentLoaded',function(event){
document.getElementById('date').addEventListener('change',validateDate);
});
</script>
註:<input>
內的 id
元素就是 JS 腳本事件中對應的參數。
(現在語法看不懂沒關係,主要是讓 HTML 和 JS 分開撰寫,以明確解析標籤的功能用法。)
上述 4 種方式各有其用處,除非 JS 程式碼量很短,否則利用外部引入的方式,不僅易於維護,也可在重覆瀏覽時用快取節省網頁載入時間,還更利於維護與修改。若頁面同時存在 JS 和 JQ 檔案,則需要分開引入,以免造成維護上的困難。
以上就是輕鬆學習 JavaScript 的建置方法,接下來就開始教你怎麼寫 JS 吧!
首先打開你的網頁編輯器,如:VS Code、Sublime Text、Atom、Notepad...都可。如果都沒有,可以使用線上編輯器,個人還蠻推薦 CodePen 或 JSBin,畢竟畫面功能直覺,且預覽速度又快,而且 CodePen 免費會員還有存檔功能,及各種大神的作品可以參考。
1.打開 CodePen 之後,不需登入一樣可以使用,請點擊左上方的「Start Coding」按鈕
2.接下來出現有「HTML、CSS、JS」這3個編輯窗格,和一個大大的「預覽」窗格。
如果你的欄位編排方式和我的長得不一樣也沒差,畢竟這是個人喜好。如果想跟我一樣,請按右上方的「Change View」更改你喜歡的編輯方式,滑出一組三選一欄位,請改為中間那個。
3.然後請在右上角的「JS」窗格內寫下以下程式碼。
alert("這是我的第一個 JavaScript");
4.滑鼠游標點擊下方的「預覽」窗格,1-2秒後就可以看到畫面上方跳出一個小視窗,內容寫著:「這是我的第一個 JavaScript」
然後...你就完成了你人生中第一支的 JavaScript了。
如果你是用自己的編輯器,以 VS Code 為例,方法如下:
1.打開 VS Code,點擊 File (檔案) -> New File (新增檔案)。
2.接下來要把從無法辨識的文件改成 html。請在圖的最下排藍色功能列(圖寫1)上,點擊「Plain Text 純文字」,圖上方跳出搜尋列(圖寫2)打上「html」,然後按 Enter 鍵
3.接著在文件內容打上半形的「!」,按 Enter 鍵
4.出現 html5 的標準結構之後,在 <body>
和 </body>
之間打入下方程式碼:
<script>
alert("這是我的第一個 JavaScript");
</script>
如圖:
5.接著點擊 File (檔案) -> Save (儲存),隨便取個 test.html。
6.接著從檔案總管直接雙擊剛儲存的檔案,它便會使用你電腦預設的瀏覽器開啟,這裡以 Google Chrome 瀏覽器為例。你可以看到網頁上方出現一個彈跳視窗,寫著「這是我的第一個 JavaScript」,這樣就完成了。
What?!!!
沒錯,JavaScript 的入門門檻就這麼低,剩下就是要詳加了解它的語法和邏輯運用而已。
其實它還能以很多種不同的方式來顯示,以下再介紹幾個初學者最常使用的簡易寫法:
1.用 innerHTML()
寫入 HTML 元素
innerHTML 是 W3C 規定的標準寫法,主要是用來取得 HTML 元素或寫入字串到 HTML 的語法,它還有個特性,就是會覆蓋原本寫的內容。另外,它還可以搭配 Element Object 來執行,如語法 getElementById()
(取得 id值 )或 getElementsByName()
(取得 name值 )等,這也是多數人常用來使用網頁互動特效的方法之一,而且幾乎所有主流的瀏覽器都支援此功能。寫法如下:
<div id="Num"></div>
<script>
document.getElementById('Num').innerHTML = 5;
//JS翻譯:把數字 5 寫入到 HTML 標籤內含有 id 叫做 Num 的地方
</script>
你可以使用 CodePen 測試看看,把上方的程式碼,複製貼到 CodePen 左上角的 「HTML」 欄位內,下方的預覽窗格就會出現 5 的數字。
2.用 console.log()
寫入瀏覽器控制台。(最多人用這個 Debug 偵錯)
幾乎各家瀏覽器都有 console 控制台(或稱「主控台」)的功能,大多都是按 F12,或是在瀏覽器的網頁內容按右鍵,選擇「檢查」或「檢查原始碼」就可以開啟「開發者工具」這個神奇的介面,不管是基礎或資深開發者都需要使用這個無敵好用的偵錯功能。
1.以 Chrome 瀏覽器為例,按 F12,開啟「開發者工具」介面,點擊左上方的「Console」
3.在上圖「Console 控制台」內,看到一個正在閃爍的游標,這時在游標處打入下方程式碼:
console.log(5 + 2);
然後按 Enter
鍵,則會看到下方會自動輸出數字 7。
然後我們又完成了二種寫 JS 的方法了。
以上就是 JavaScript 的超入門建置方式,接下來就是開始進入基本概念和語法囉。
參考資料:
上一篇:【JS幼幼班】Step.01 學習,從「不要害怕」開始
下一篇:【JS幼幼班】Step.03 JavaScript 的基本概念